<template>
  <div>
    Home
    <router-link :to="{ name: 'Details', params: { id: 123 } }"
      >to details</router-link
    >
    <div>
      <button @click="toDetails">details</button>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    toDetails() {
      console.log("click");
      // 编程式导航
      // js 来控制导航
      console.log(this.$router);
      //   this.$router.push({
      //     name: "Details",
      //     params: { id: 123 },
      //   });
      this.$router.replace({
        name: "Details",
        params: { id: 123 },
      });

      // this.$router.push("/details/123")
    },
  },
  beforeRouteEnter(to, form, next) {
    console.log("before - router- enter");
    console.log(to, form, next);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("router - leave");
    console.log(to,from)
    next()
  },
};
</script>

<style></style>
